import { AtSearchBar } from 'taro-ui'
import { Component } from 'react'
import { View, Text, Image} from '@tarojs/components'
import { AtList, AtListItem } from "taro-ui"

import './index.scss'
import MySwiper from '../mycomponents/myswiper'
import MyGrid from '../mycomponents/mygrid'
import MyList from '../mycomponents/mylist'

 
export default class Index extends Component {
  constructor () {
    super(...arguments)
    this.state = {
      value: ''
    }
  }
  onChange (value) {
    this.setState({
      value: value
    })
  }
  onActionClick () {
    console.log('开始搜索')
  }

  componentWillMount () { }

  componentDidMount () { }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  render () {
    return (
      <View>
        <View>
        <AtSearchBar
        actionName='搜一下'
        value={this.state.value}
        onChange={this.onChange.bind(this)}
        onActionClick={this.onActionClick.bind(this)}
        className='searcher-bar' />     
         <MySwiper />
           < MyGrid />
        </View>
        <View className='at-row at-row__justify--around'>
            <View className='at-col ' ><Image style='height:100px; width: 150px;' src={require("../../assets/images/u233.png") }/></View>
            <View className='at-col ' ><Image style='height:100px; width: 150px;' src={require("../../assets/images/u230.png") }/></View>
        </View>   
        <MyList/>
      </View>
    )
  }
}
